<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台登录</title>
    <meta content="webkit|ie-comp|ie-stand" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"
          name="viewport"/>
    <meta content="no-siteapp" http-equiv="Cache-Control"/>
    <!--    <link href="/plugin/login/sys.min.css" rel="stylesheet" type="text/css">-->
    <!--    <link href="/plugin/layui/css/layui.css" media="all" rel="stylesheet">-->

    <script src="/plugin/login/jquery-core.min.js" type="text/javascript"></script>
    <script src="/plugin/login/jquery-ui-core.min.js" type="text/javascript"></script>
    <script src="/plugin/login/fai.min.js" type="text/javascript"></script>
    <script src="/plugin/layui/layui.all.js" type="text/javascript"></script>
</head>


<style>
    body {
        font-family: Arial, sans-serif;
        background: url(plugin/login/demo2.png) 0 0 / cover no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }

    .login-container {
        max-width: 400px;
        padding: 30px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    h1 {
        margin-top: 0;
    }

    .form-group {
        margin-bottom: 15px;
    }

    label {
        display: block;
        margin-bottom: 5px;
    }

    input {
        width: 100%;
        padding: 10px;
        border: 1px solid #ced4da;
        border-radius: 3px;
    }

    .captcha-container {
        display: flex;
        align-items: center;
    }

    #captchaImage {
        display: inline-block;
        margin-top: 5px;
        margin-left: 5px;
        cursor: pointer;
    }

    .remember-container {
        display: flex;
        align-items: center;
    }
    #rememberMe{
        width: 30px;
    }
    .remember-me{
        display: inline-block;
        margin-top: 5px;
        margin-left: 5px;
        cursor: pointer;
    }

    button {
        display: block;
        margin-top: 20px;
        padding: 10px;
        width: 100%;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 3px;
        cursor: pointer;
    }

    a {
        display: block;
        margin-top: 10px;
        text-align: right;
        text-decoration: none;
        color: #007bff;
    }
</style>

<body>
<div class="login-container">
    <h1>欢迎登录系统管理后台</h1>
    <form id="loginForm" onsubmit="return validateForm()">
        <div class="form-group">
            <label for="username">用户名：</label>
            <input type="username" id="username" name="username" required>
        </div>
        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" required>
        </div>
        <div class="form-group">
            <label for="captcha">验证码：</label>
            <div class="captcha-container">
                <input type="text" id="captcha" name="captcha" required>
                <img src="/getCode" alt="验证码图片" id="captchaImage">
            </div>
        </div>
        <div class="form-group">
            <div class="remember-container">
                <input type="checkbox" id="rememberMe" name="rememberMe">
                <label for="rememberMe" class="remember-me">记住我</label>
            </div>
        </div>
        <button type="submit">登录</button>
    </form>
</div>
<script>
    // 刷新验证码
    function randomCode() {
        $('#captchaImage').attr('src', '/getCode?' + Math.random());
    }

    $(function () {
        $("#captchaImage").click(function () {
            randomCode();
        });
    });

    // 表单验证
    function validateForm() {
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
        var captcha = document.getElementById('captcha').value;

        if (!username || !password || !captcha) {
            alert('请填写完整信息');
            return false;
        }
        // document.getElementById('loginForm').submit();
        return false;
    }

</script>
</body>
</html>